<script setup lang="ts">
import { provide, ref } from 'vue'
import type { NameType, CollapseProps } from './type'
import { CollapseContextKey } from './type'
defineOptions({
  name: 'VKCollapse'
})
const props = defineProps<CollapseProps>()
const activeNames = defineModel<NameType[]>({
  default: () => [] // 设置默认值为空数组
})
const handleItemClick = (item: NameType) => {
  if (props.accordion) {
    activeNames.value = [activeNames.value[0] === item ? '' : item]
  } else {
    const index = activeNames.value.indexOf(item)
    if (index > -1) {
      activeNames.value.splice(index, 1)
    } else {
      activeNames.value.push(item)
    }
  }
}
if (props.accordion && activeNames.value.length > 1) {
  console.warn(
    `手风琴模式下只能展开一个元素，您的数组里包含多个元素--${activeNames.value}，已经自动清除后面的元素`
  )
  activeNames.value = [activeNames.value[0]]
}
provide(CollapseContextKey, { activeNames, handleItemClick })
</script>

<template>
  <div class="vk-collapse">
    <slot></slot>
  </div>
</template>

<style scoped></style>
